<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>选择联系人 - 多风格底部弹窗</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      min-height: 150vh;
      padding-bottom: 20px;
      transition: background-color 0.3s;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* 页面容器 */
    .page-container {
      display: none;
      padding-top: 20px;
    }
    
    .page-container.active {
      display: block;
    }
    
    /* 导航栏 */
    .navbar {
      padding: 15px 0;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    
    .nav-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      background: none;
      border: none;
      font-size: 16px;
      font-weight: 500;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
    }
    
    /* 内容区域 */
    .content-card {
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .card-header {
      padding: 12px 15px;
      border-bottom: 1px solid;
    }
    
    .card-title {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
    }
    
    .card-body {
      padding: 15px;
    }
    
    .card-text {
      margin-bottom: 10px;
      line-height: 1.5;
    }
    
    .action-button {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 6px;
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      border: none;
      margin-top: 10px;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 100;
      background-color: white;
      border-radius: 30px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      padding: 8px;
      display: flex;
      gap: 5px;
      border: 1px solid rgba(0,0,0,0.1);
    }
    
    .style-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      transition: transform 0.2s;
    }
    
    .style-btn:hover {
      transform: scale(1.1);
    }
    
    .style-btn.active {
      box-shadow: 0 0 0 2px white, 0 0 0 4px #0d6efd;
    }
    
    /* 选择用户弹窗 */
    .user-selector-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      display: none;
      z-index: 1000;
    }
    
    .user-selector {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 540px;
      margin: 0 auto;
      border-radius: 16px 16px 0 0;
      height: 90vh;
      display: flex;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform 0.3s ease-out;
      z-index: 1001;
    }
    
    .user-selector.active {
      transform: translateY(0);
    }
    
    .selector-header {
      padding: 15px;
      border-bottom: 1px solid;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .selector-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .selector-close {
      background: none;
      border: none;
      font-size: 22px;
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .search-container {
      padding: 15px;
      border-bottom: 1px solid;
    }
    
    .search-input {
      width: 100%;
      padding: 12px 15px;
      border-radius: 8px;
      border: 1px solid;
      font-size: 15px;
      background: transparent;
      outline: none;
    }
    
    .search-input::placeholder {
      opacity: 0.7;
    }
    
    .selector-body {
      flex: 1;
      overflow-y: auto;
    }
    
    .section-title {
      font-size: 14px;
      font-weight: 600;
      padding: 12px 15px;
    }
    
    .user-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .user-item {
      padding: 12px 15px;
      display: flex;
      align-items: center;
      cursor: pointer;
      border-bottom: 1px solid;
    }
    
    .user-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .user-info {
      flex: 1;
      overflow: hidden;
    }
    
    .user-name {
      font-size: 16px;
      font-weight: 500;
      margin: 0 0 3px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .user-status {
      font-size: 12px;
      opacity: 0.7;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .user-check {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      opacity: 0;
    }
    
    .user-item.selected .user-check {
      opacity: 1;
    }
    
    .selector-footer {
      padding: 15px;
      border-top: 1px solid;
    }
    
    .confirm-btn {
      width: 100%;
      padding: 12px 0;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      border: none;
      cursor: pointer;
    }
    
    .selected-count {
      font-size: 13px;
      text-align: center;
      margin-top: 8px;
    }
    
    /* 选择成功提示 */
    .toast-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10000;
    }
    
    .toast {
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 12px 20px;
      font-size: 15px;
      display: none;
    }
    
    /* 风格1 - 经典蓝 */
    .style-1 {
      background-color: #f8f9fa;
      color: #212529;
    }
    
    .style-1 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .style-1 .nav-btn {
      color: #0d6efd;
    }
    
    .style-1 .content-card {
      background-color: white;
    }
    
    .style-1 .card-header {
      border-color: #e9ecef;
      background-color: #f8f9fa;
    }
    
    .style-1 .action-button {
      background-color: #0d6efd;
      color: white;
    }
    
    .style-1 .user-selector {
      background-color: white;
    }
    
    .style-1 .selector-header,
    .style-1 .search-container {
      border-color: #e9ecef;
    }
    
    .style-1 .search-input {
      border-color: #ced4da;
      background-color: #f8f9fa;
    }
    
    .style-1 .section-title {
      background-color: #f8f9fa;
      color: #6c757d;
    }
    
    .style-1 .user-item {
      border-color: #f1f3f5;
    }
    
    .style-1 .user-item:hover {
      background-color: #f8f9fa;
    }
    
    .style-1 .user-check {
      border-color: #0d6efd;
      color: #0d6efd;
      background-color: #e7f1ff;
    }
    
    .style-1 .selector-footer {
      border-color: #e9ecef;
    }
    
    .style-1 .confirm-btn {
      background-color: #0d6efd;
      color: white;
    }
    
    .style-1 .selected-count {
      color: #6c757d;
    }
    
    /* 风格2 - 活力橙 */
    .style-2 {
      background-color: #fff9f0;
      color: #854d0e;
    }
    
    .style-2 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(249, 115, 22, 0.1);
    }
    
    .style-2 .nav-btn {
      color: #ea580c;
    }
    
    .style-2 .content-card {
      background-color: white;
    }
    
    .style-2 .card-header {
      border-color: #ffeedd;
      background-color: #fff9f0;
    }
    
    .style-2 .action-button {
      background-color: #ea580c;
      color: white;
    }
    
    .style-2 .user-selector {
      background-color: white;
    }
    
    .style-2 .selector-header,
    .style-2 .search-container {
      border-color: #ffeedd;
    }
    
    .style-2 .search-input {
      border-color: #ffedd5;
      background-color: #fff9f0;
    }
    
    .style-2 .section-title {
      background-color: #fff9f0;
      color: #c2410c;
    }
    
    .style-2 .user-item {
      border-color: #fff3e0;
    }
    
    .style-2 .user-item:hover {
      background-color: #fff9f0;
    }
    
    .style-2 .user-check {
      border-color: #ea580c;
      color: #ea580c;
      background-color: #fff3cd;
    }
    
    .style-2 .selector-footer {
      border-color: #ffeedd;
    }
    
    .style-2 .confirm-btn {
      background-color: #ea580c;
      color: white;
    }
    
    .style-2 .selected-count {
      color: #c2410c;
    }
    
    /* 风格3 - 暗黑系 */
    .style-3 {
      background-color: #1e293b;
      color: #f8fafc;
    }
    
    .style-3 .navbar {
      background-color: #0f172a;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    .style-3 .nav-btn {
      color: #93c5fd;
    }
    
    .style-3 .content-card {
      background-color: #0f172a;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    
    .style-3 .card-header {
      border-color: #334155;
      background-color: #1e293b;
    }
    
    .style-3 .action-button {
      background-color: #3b82f6;
      color: white;
    }
    
    .style-3 .user-selector {
      background-color: #0f172a;
    }
    
    .style-3 .selector-header,
    .style-3 .search-container {
      border-color: #334155;
    }
    
    .style-3 .search-input {
      border-color: #334155;
      background-color: #1e293b;
    }
    
    .style-3 .section-title {
      background-color: #1e293b;
      color: #94a3b8;
    }
    
    .style-3 .user-item {
      border-color: #334155;
    }
    
    .style-3 .user-item:hover {
      background-color: #1e293b;
    }
    
    .style-3 .user-check {
      border-color: #3b82f6;
      color: #3b82f6;
      background-color: #1e40af;
    }
    
    .style-3 .selector-footer {
      border-color: #334155;
    }
    
    .style-3 .confirm-btn {
      background-color: #3b82f6;
      color: white;
    }
    
    .style-3 .selected-count {
      color: #94a3b8;
    }
    
    /* 风格4 - 清新绿 */
    .style-4 {
      background-color: #f0fdf4;
      color: #166534;
    }
    
    .style-4 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(16, 185, 129, 0.1);
    }
    
    .style-4 .nav-btn {
      color: #15803d;
    }
    
    .style-4 .content-card {
      background-color: white;
    }
    
    .style-4 .card-header {
      border-color: #dcfce7;
      background-color: #f0fdf4;
    }
    
    .style-4 .action-button {
      background-color: #15803d;
      color: white;
    }
    
    .style-4 .user-selector {
      background-color: white;
    }
    
    .style-4 .selector-header,
    .style-4 .search-container {
      border-color: #dcfce7;
    }
    
    .style-4 .search-input {
      border-color: #bbf7d0;
      background-color: #f0fdf4;
    }
    
    .style-4 .section-title {
      background-color: #f0fdf4;
      color: #166534;
    }
    
    .style-4 .user-item {
      border-color: #f0fdf4;
    }
    
    .style-4 .user-item:hover {
      background-color: #f0fdf4;
    }
    
    .style-4 .user-check {
      border-color: #15803d;
      color: #15803d;
      background-color: #dcfce7;
    }
    
    .style-4 .selector-footer {
      border-color: #dcfce7;
    }
    
    .style-4 .confirm-btn {
      background-color: #15803d;
      color: white;
    }
    
    .style-4 .selected-count {
      color: #166534;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="1" style="background-color: #0d6efd;"></button>
    <button class="style-btn" data-style="2" style="background-color: #ea580c;"></button>
    <button class="style-btn" data-style="3" style="background-color: #3b82f6;"></button>
    <button class="style-btn" data-style="4" style="background-color: #15803d;"></button>
  </div>
  
  <!-- 风格1 - 经典蓝 -->
  <div class="page-container style-1 active" data-style="1">
    <div class="navbar">
      <div class="container nav-content">
        <span></span>
        <h1 class="nav-title">消息详情</h1>
        <button class="nav-btn">编辑</button>
      </div>
    </div>
    
    <div class="container">
      <div class="content-card">
        <div class="card-header">
          <h2 class="card-title">群组活动邀请</h2>
        </div>
        <div class="card-body">
          <p class="card-text">
            本周末我们将组织一次户外徒步活动，诚邀各位群友参加。活动地点在城市郊野公园，全程约5公里，难度适中，适合各类人群参与。
          </p>
          <p class="card-text">
            时间：周六上午9:00集合<br>
            地点：郊野公园正门入口处<br>
            装备：舒适运动鞋、防晒用品、饮用水
          </p>
          <button class="action-button select-participants">选择参与人员</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 风格2 - 活力橙 -->
  <div class="page-container style-2" data-style="2">
    <div class="navbar">
      <div class="container nav-content">
        <span></span>
        <h1 class="nav-title">消息详情</h1>
        <button class="nav-btn">编辑</button>
      </div>
    </div>
    
    <div class="container">
      <div class="content-card">
        <div class="card-header">
          <h2 class="card-title">群组活动邀请</h2>
        </div>
        <div class="card-body">
          <p class="card-text">
            本周末我们将组织一次户外徒步活动，诚邀各位群友参加。活动地点在城市郊野公园，全程约5公里，难度适中，适合各类人群参与。
          </p>
          <p class="card-text">
            时间：周六上午9:00集合<br>
            地点：郊野公园正门入口处<br>
            装备：舒适运动鞋、防晒用品、饮用水
          </p>
          <button class="action-button select-participants">选择参与人员</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 风格3 - 暗黑系 -->
  <div class="page-container style-3" data-style="3">
    <div class="navbar">
      <div class="container nav-content">
        <span></span>
        <h1 class="nav-title">消息详情</h1>
        <button class="nav-btn">编辑</button>
      </div>
    </div>
    
    <div class="container">
      <div class="content-card">
        <div class="card-header">
          <h2 class="card-title">群组活动邀请</h2>
        </div>
        <div class="card-body">
          <p class="card-text">
            本周末我们将组织一次户外徒步活动，诚邀各位群友参加。活动地点在城市郊野公园，全程约5公里，难度适中，适合各类人群参与。
          </p>
          <p class="card-text">
            时间：周六上午9:00集合<br>
            地点：郊野公园正门入口处<br>
            装备：舒适运动鞋、防晒用品、饮用水
          </p>
          <button class="action-button select-participants">选择参与人员</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 风格4 - 清新绿 -->
  <div class="page-container style-4" data-style="4">
    <div class="navbar">
      <div class="container nav-content">
        <span></span>
        <h1 class="nav-title">消息详情</h1>
        <button class="nav-btn">编辑</button>
      </div>
    </div>
    
    <div class="container">
      <div class="content-card">
        <div class="card-header">
          <h2 class="card-title">群组活动邀请</h2>
        </div>
        <div class="card-body">
          <p class="card-text">
            本周末我们将组织一次户外徒步活动，诚邀各位群友参加。活动地点在城市郊野公园，全程约5公里，难度适中，适合各类人群参与。
          </p>
          <p class="card-text">
            时间：周六上午9:00集合<br>
            地点：郊野公园正门入口处<br>
            装备：舒适运动鞋、防晒用品、饮用水
          </p>
          <button class="action-button select-participants">选择参与人员</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 选择用户弹窗 -->
  <div class="user-selector-overlay"></div>
  <div class="user-selector">
    <div class="selector-header">
      <h2 class="selector-title">选择参与人员</h2>
      <button class="selector-close">
        <i class="fa fa-times"></i>
      </button>
    </div>
    
    <div class="search-container">
      <input type="text" class="search-input" placeholder="搜索联系人...">
    </div>
    
    <div class="selector-body">
      <div class="section-title">常用联系人</div>
      <ul class="user-list">
        <li class="user-item">
          <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">张明</h3>
            <p class="user-status">徒步爱好者</p>
          </div>
          <div class="user-check">
            <i class="fa fa-check"></i>
          </div>
        </li>
        <li class="user-item">
          <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">李华</h3>
            <p class="user-status">经常参加活动</p>
          </div>
          <div class="user-check">
            <i class="fa fa-check"></i>
          </div>
        </li>
        <li class="user-item">
          <img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">王芳</h3>
            <p class="user-status">摄影爱好者</p>
          </div>
          <div class="user-check">
            <i class="fa fa-check"></i>
          </div>
        </li>
      </ul>
      
      <div class="section-title">群成员</div>
      <ul class="user-list">
        <li class="user-item">
          <img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">赵伟</h3>
            <p class="user-status">在线</p>
          </div>
          <div class="user-check">
            <i class="fa fa-check"></i>
          </div>
        </li>
        <li class="user-item">
          <img src="https://picsum.photos/200/200?random=5" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">陈静</h3>
            <p class="user-status">刚活跃</p>
          </div>
          <div class="user-check">
            <i class="fa fa-check"></i>
          </div>
        </li>
        <li class="user-item">
          <img src="https://picsum.photos/200/200?random=6" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">刘强</h3>
            <p class="user-status">离线</p>
          </div>
          <div class="user-check">
            <i class="fa fa-check"></i>
          </div>
        </li>
        <li class="user-item">
          <img src="https://picsum.photos/200/200?random=7" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">杨洋</h3>
            <p class="user-status">在线</p>
          </div>
          <div class="user-check">
            <i class="fa fa-check"></i>
          </div>
        </li>
        <li class="user-item">
          <img src="https://picsum.photos/200/200?random=8" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">孙丽</h3>
            <p class="user-status">勿扰模式</p>
          </div>
          <div class="user-check">
            <i class="fa fa-check"></i>
          </div>
        </li>
        <li class="user-item">
          <img src="https://picsum.photos/200/200?random=9" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">周杰</h3>
            <p class="user-status">在线</p>
          </div>
          <div class="user-check">
            <i class="fa fa-check"></i>
          </div>
        </li>
        <li class="user-item">
          <img src="https://picsum.photos/200/200?random=10" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">吴敏</h3>
            <p class="user-status">离线</p>
          </div>
          <div class="user-check">
            <i class="fa fa-check"></i>
          </div>
        </li>
      </ul>
    </div>
    
    <div class="selector-footer">
      <button class="confirm-btn">确认选择</button>
      <div class="selected-count">已选择 <span id="selected-number">0</span> 人</div>
    </div>
  </div>
  
  <!-- 提示框 -->
  <div class="toast-container">
    <div class="toast" id="toast-notification">操作成功</div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取当前激活的页面容器
    function getActivePage() {
      return document.querySelector('.page-container.active');
    }
    
    // 风格切换功能
    const styleBtns = document.querySelectorAll('.style-btn');
    const pageContainers = document.querySelectorAll('.page-container');
    const userSelector = document.querySelector('.user-selector');
    
    styleBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有活跃状态
        styleBtns.forEach(b => b.classList.remove('active'));
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 添加当前活跃状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.querySelector(`.page-container[data-style="${style}"]`).classList.add('active');
        
        // 更新选择器弹窗样式
        updateSelectorStyle(style);
      });
    });
    
    // 更新选择器弹窗样式
    function updateSelectorStyle(style) {
      // 移除所有风格类
      userSelector.className = userSelector.className.replace(/style-\d+/g, '');
      // 添加当前风格类
      userSelector.classList.add(`style-${style}`);
    }
    
    // 初始化选择器弹窗样式
    updateSelectorStyle(1);
    
    // 打开选择用户弹窗
    function openUserSelector() {
      document.querySelector('.user-selector-overlay').style.display = 'block';
      userSelector.classList.add('active');
      document.body.style.overflow = 'hidden';
      updateSelectedCount();
    }
    
    // 关闭选择用户弹窗
    function closeUserSelector() {
      document.querySelector('.user-selector-overlay').style.display = 'none';
      userSelector.classList.remove('active');
      document.body.style.overflow = 'auto';
    }
    
    // 选择用户按钮点击事件
    document.querySelectorAll('.select-participants').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.closest('.page-container.active')) {
          openUserSelector();
        }
      });
    });
    
    // 关闭选择器事件
    document.querySelector('.selector-close').addEventListener('click', closeUserSelector);
    document.querySelector('.user-selector-overlay').addEventListener('click', closeUserSelector);
    
    // 用户选择功能
    const userItems = document.querySelectorAll('.user-item');
    userItems.forEach(item => {
      item.addEventListener('click', function() {
        this.classList.toggle('selected');
        updateSelectedCount();
      });
    });
    
    // 更新已选择数量
    function updateSelectedCount() {
      const count = document.querySelectorAll('.user-item.selected').length;
      document.getElementById('selected-number').textContent = count;
    }
    
    // 确认选择按钮
    document.querySelector('.confirm-btn').addEventListener('click', function() {
      const count = document.querySelectorAll('.user-item.selected').length;
      if (count === 0) {
        showToast('请至少选择一位参与者');
        return;
      }
      
      showToast(`已成功选择 ${count} 位参与者`);
      setTimeout(closeUserSelector, 800);
    });
    
    // 搜索功能
    document.querySelector('.search-input').addEventListener('input', function(e) {
      const searchTerm = e.target.value.toLowerCase();
      const userItems = document.querySelectorAll('.user-item');
      
      userItems.forEach(item => {
        const userName = item.querySelector('.user-name').textContent.toLowerCase();
        const userStatus = item.querySelector('.user-status').textContent.toLowerCase();
        
        if (userName.includes(searchTerm) || userStatus.includes(searchTerm)) {
          item.style.display = 'flex';
        } else {
          item.style.display = 'none';
        }
      });
    });
    
    // 显示提示框
    function showToast(message) {
      const toast = document.getElementById('toast-notification');
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
